<script setup>
</script>

<template>
  <div>
    <div class="topbar">
      <div class="container topbar-inner">
        <div class="left">
          <span>欢迎来到 E‑Shop</span>
        </div>
        <div class="right">
          <router-link to="/user">个人中心</router-link>
          <span class="divider" />
          <router-link to="/orders">订单</router-link>
          <span class="divider" />
          <router-link to="/cart">购物车</router-link>
        </div>
      </div>
    </div>
    <header class="container header">
      <div class="logo">E‑Shop</div>
      <div class="search field">
        <input placeholder="搜索商品/店铺" />
        <button class="btn btn-primary">搜索</button>
      </div>
      <nav class="nav">
        <router-link to="/">首页</router-link>
        <router-link to="/category">分类</router-link>
        <router-link to="/cart">购物车</router-link>
        <router-link to="/orders">订单</router-link>
        <router-link to="/user">我的</router-link>
      </nav>
    </header>
    <main class="container main">
      <router-view />
    </main>
    <footer class="footer">
      <div class="container footer-inner">© 2025 E‑Shop</div>
    </footer>
  </div>
  
  
</template>

<style scoped>
.topbar { background: #fff; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.topbar .right { display: flex; align-items: center; gap: 10px; }
.divider { display: inline-block; width: 1px; height: 12px; background: var(--border); }

.header { display: grid; grid-template-columns: 160px 1fr auto; gap: 16px; padding: 16px 0; align-items: center; }
.logo { font-weight: 800; font-size: 26px; letter-spacing: .5px; }
.nav { display: flex; gap: 16px; }
.nav a { padding: 8px 10px; border-radius: 8px; }
.nav a.router-link-active { background: rgba(225,37,27,.06); color: var(--primary); }
.main { min-height: 64vh; }
.footer { color: #888; margin-top: 24px; padding: 24px 0; background: #fff; border-top: 1px solid var(--border); }
.search input { width: 420px; }
</style>


